<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">

    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="/static/bootstrap/bootstrap.min.css">
    <!-- 可选的Bootstrap主题文件（一般不用引入） -->
    <link rel="stylesheet" href="/static/bootstrap/bootstrap-theme.min.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="/static/bootstrap/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="/static/bootstrap/bootstrap.min.js"></script>
    ##     <!-- jsTree -->
    ##     <link rel="stylesheet" href="/static/jstree/themes/default/style.min.css" />
    ##     <script src="/static/jstree/jquery.min.js"></script>
    ##     <script src="/static/jstree/jstree.min.js"></script>
    ##     <!-- echarts -->
    ##     <script src="/static/echarts/echarts-all.js"></script>


    ## JS 引用顺序: jquery, underscore, backbone
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
    <script src="http://apps.bdimg.com/libs/underscore.js/1.7.0/underscore.js"></script>
    <script src="http://apps.bdimg.com/libs/backbone.js/1.1.2/backbone.js"></script>
</head>
<body>
    <h3>backbone.js</h3>

    ##     <div class="container-fluid">
    ##         ${ data['key'] }
    ##     </div>

    <div class="container-fluid">
        <table class="table table-bordered table-striped" id="id_table">
            <thead>
                <tr>
                    <td>ID</td>
                    <th>图片</th>
                    <th>标题</th>
                    <th>来源频道</th>
                    <th>详情</th>
                    <th>发布时间</th>
                </tr>
            </thead>
            <tbody>
##                 {% for news in page.object_list %}
##                 <tr>
##                     <td>{{ news.id }}</td>
##                     <td>
##                         <img src="{{ news.img }}" height="120" width="160">
##                     </td>
##                     <td><a href="{{ news.link }}">{{ news.title }}</a></td>
##                     <td>{{ news.source }}<br>{{ news.channel_name }}({{ news.channel_id }})</td>
##                     <td>{{ news.desc }}</td>
##                     <td>{{ news.datetime_publish }}</td>
##                 </tr>
##                 {% endfor %}
            </tbody>
        </table>
    </div>




    <script>
        (function($){

            var News = Backbone.Model.extend({
                // url: "http://192.168.100.100:8000/api/news/?format=json",
                // url: "/api/news/?format=json",
                initialize: function(){
                    console.log('initialize: News');
                }
            });

            var NewsCollection = Backbone.Collection.extend({
                model: News,
                url: "/api/news/?format=json",
                initialize: function(){
                    console.log('initialize: NewsCollection');
                    this.fetch({
                        success: function(collection, response, options){
                            alert('fetch success');
                            // console.log(typeof(collection));
                            console.log(collection);
                            // console.log(typeof(response));
                            console.log(response);
                            // console.log(typeof(options));
                            console.log(options);

                            // ??????????
                        },
                        error: function(collection, response, options){
                            alert('fetch error');
                        }
                    });
                }
            });

            var newscollection = new NewsCollection();\

        })(jQuery);
    </script>


</body>
</html>
